// pages/album/album.js
Page({
  data:{
    flag: true,
    index: -1,
    server: 'http://read.yajunliang.com/static/album/newimg/',
    imgArr:[],
    startPoint: {
      pageX: 0,
      pageY: 0
    },
    endPoint: {
      pageX: 0,
      pageY: 0
    },
    audioContext: null,
    autoplay: false,
    timer: null
  },
  onLoad(){
    this.randomImgArr();
    this.innerAudioContext();
  },
  onHide(){
    this.audioContext.stop();
    this.audioContext.destroy();
  },
  onUnload(){
    this.audioContext.stop();
    this.audioContext.destroy();
  },
  hasPlay(){
    let autoplay = !this.data.autoplay;
    autoplay ? this.audioContext.play() : this.audioContext.pause();
    this.setData({autoplay})
  },
  innerAudioContext(){
    this.audioContext = wx.createInnerAudioContext();
    // this.audioContext.autoplay = true;
    this.audioContext.loop = true;
    this.audioContext.src = "http://read.yajunliang.com/static/album/mp3/datianpeng.mp3";
    this.audioContext.onCanplay(res => {
      this.hasPlay();
    })
  },
  randomImgArr(){
    let num = Math.floor(Math.random() * (50 - 40) + 40),
        i = 0,
        imgArr = [];
    for(;i < num; i++){
      imgArr.push({
        isturn: false,
        zIndex: 1,
        type: this.randomType(),
        ...this.positionStyle()
      })
    }
    imgArr[0].type = 0;
    imgArr[num - 1].type = 4;
    imgArr[0].zIndex = 4;
    imgArr[1].zIndex = 3;
    this.setData({imgArr})
    let timer = setTimeout(() => {
      this.autoplayChange();
      clearTimeout(timer);
    }, 3000);
  },
  randomType(){
    return Math.floor(Math.random() * 9);
  },
  positionStyle(){
    var num = Math.floor(Math.random() * 100)
    var x = num % 4 == 0 ? 'top:0;left:0;' : 
            num % 4 == 1 ? 'top:0;right:0;' :
            num % 4 == 2 ? 'bottom:0;left:0;':
            'bottom:0;right:0;';
    var y = num % 4 == 0 ? 'bottom:0;right:0;' : 
            num % 4 == 1 ? 'bottom:0;left:0;' :
            num % 4 == 2 ? 'top:0;right:0;':
            'top:0;left:0;';
    return {
      x: x,
      y: y
    }
  },
  start(e){
    this.data.startPoint = e.touches[0];
  },
  move(e){
    this.data.endPoint = e.touches[0];
  },
  end(e){
    // if(!this.data.flag){
    //   return false;
    // }
    // this.data.flag = false;
    // setTimeout(() => this.data.flag = true,1600);
    // let len = this.data.imgArr.length;
    // let dir = this.getTouchDirection();
    // let index = this.data.index;
    // index = dir === 'left' ? index + 1 : index - 1;
    // if(index >= 0 && index < len){
    //   console.log(index)
    //   this.changeAlbum(index);
    //   this.data.index = index;
    // }
  },
  autoplayChange(){
    this.data.index += 1;
    if(this.data.index < this.data.imgArr.length){
      this.handleAlbum(this.data.index);
      this.timer = setTimeout(this.autoplayChange, 5000);
    } else {
      this.data.index = -1;
      clearTimeout(this.timer);
    }
    
  },
  changeAlbumFc(e){
    let index = e.currentTarget.dataset.index;
    this.handleAlbum(index);
    clearTimeout(this.timer);
  },
  handleAlbum(index){
    if(!this.data.flag){
      return false;
    }
    this.data.flag = false;
    this.changeAlbum(index);
    setTimeout(() => this.data.flag = true,1600);
  },
  changeAlbum(index){
    let imgs = this.data.imgArr;
    imgs.map((ele,i)=>{
      if(index === i){
        imgs[i].isturn = !imgs[i].isturn;
        imgs[i].zIndex = 4;
      }else{
        imgs[i].zIndex = 1;
      }
    })
    if(index-1>=0 && imgs[index-1]){
      imgs[index-1].zIndex = 3;
    }
    if(index+1<imgs.length && imgs[index+1]){
      imgs[index+1].zIndex = 3;
    }
    if(index-2>=0 && imgs[index - 2]){
      imgs[index - 2].zIndex = 2;
    }
    if(index+2<imgs.length && imgs[index + 2]){
      imgs[index + 2].zIndex = 2;
    }
    this.setData({
      imgArr:imgs
    })
  },
  // 获取触摸移动方向
  getTouchDirection(){
    let {startPoint, endPoint} = this.data;
    return endPoint.pageX <= startPoint.pageX ? this.getTouchLeftOrRight() : this.getTouchLeftOrRight('right');
  },
  // 判断触摸方向的左右
  getTouchLeftOrRight(type = 'left'){
    let {startPoint, endPoint} = this.data;
    let endX = endPoint.pageX,
        endY = endPoint.pageY,
        startX = startPoint.pageX,
        startY = startPoint.pageY,
        pageX = Math.abs(endX - startX),
        pageY = Math.abs(endY - startY);
    return pageX >= pageY ? type : this.getTouchDownOrUp(startY, endY);
  },
  // 判断触摸方向的上下
  getTouchDownOrUp(startY = 0, endY = 0){
    return endY >= startY ? 'down' : 'up';
  }
})